<template>
  <div class="video-gallery">
    <!-- 横向菜单 -->
    <el-menu
      :default-active="activeCategory"
      mode="horizontal"
      class="category-menu"
      @select="handleSelect"
      background-color="transparent"
      text-color="#666"
      active-text-color="#333"
    >
      <el-menu-item
        v-for="(category, index) in categories"
        :key="index"
        :index="category.name"
        class="menu-item"
      >
        {{ category.name }}
      </el-menu-item>
    </el-menu>

    <!-- 视频展示区域 -->
    <div class="video-container">
      <div class="video-grid">
        <div
          v-for="(video, videoIndex) in selectedCategory.videos"
          :key="videoIndex"
          class="video-card"
        >
          <video
            :src="video.url"
            class="video"
            controls
          ></video>
          <div class="video-info">
            <span>{{ video.title }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      categories: [
        {
          name: "自然",
          videos: [
            { url: "https://example.com/nature1.mp4", title: "自然视频1" },
            { url: "https://example.com/nature2.mp4", title: "自然视频2" },
            { url: "https://example.com/nature3.mp4", title: "自然视频3" },
          ],
        },
        {
          name: "城市",
          videos: [
            { url: "https://example.com/city1.mp4", title: "城市视频1" },
            { url: "https://example.com/city2.mp4", title: "城市视频2" },
            { url: "https://example.com/city3.mp4", title: "城市视频3" },
          ],
        },
        {
          name: "动物",
          videos: [
            { url: "https://example.com/animal1.mp4", title: "动物视频1" },
            { url: "https://example.com/animal2.mp4", title: "动物视频2" },
            { url: "https://example.com/animal3.mp4", title: "动物视频3" },
          ],
        },
      ],
      activeCategory: "自然",
      selectedCategory: null,
    };
  },
  methods: {
    handleSelect(index) {
      this.activeCategory = index;
      this.selectedCategory = this.categories.find((cat) => cat.name === index);
    },
  },
  mounted() {
    this.selectedCategory = this.categories.find(
      (cat) => cat.name === this.activeCategory
    );
  },
};
</script>

<style scoped>
.video-gallery {
  max-width: 1200px;
  margin: 2rem auto;
  padding: 0 1.5rem;
}

.category-menu {
  display: flex;
  justify-content: center;
  border-bottom: none;
  margin-bottom: 1.5rem;
}

.menu-item {
  padding: 0 1.5rem;
  height: 3rem;
  font-size: 1rem;
  font-weight: 500;
  border-bottom: 2px solid transparent;
  transition: all 0.2s ease;
}

.menu-item:hover {
  background-color: transparent !important;
  color: #333 !important;
}

.menu-item.is-active {
  border-bottom-color: #333;
}

.video-container {
  width: 100%;
}

.video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
}

.video-card {
  display: flex;
  flex-direction: column;
  border-radius: 4px;
  overflow: hidden;
  transition: transform 0.2s ease;
}

.video-card:hover {
  transform: translateY(-4px);
}

.video {
  width: 100%;
  height: 160px;
  object-fit: cover;
  background-color: #f5f5f5;
}

.video-info {
  padding: 0.75rem 0;
  font-size: 0.9rem;
  color: #333;
  text-align: center;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .video-grid {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1rem;
  }

  .menu-item {
    padding: 0 1rem;
  }
}

@media (max-width: 480px) {
  .video-gallery {
    padding: 0 1rem;
  }

  .video-grid {
    grid-template-columns: 1fr;
  }
}
</style>
